import { Selector } from 'antd-mobile'
import { BillOutline, ClockCircleOutline } from 'antd-mobile-icons'
import styles from '../css/query.module.css'
import { useSearchParams } from 'react-router-dom'
import { useMemo, useState } from 'react'

function TabFooter() {
  const [sp, setSP] = useSearchParams()
  // 选项
  const [options] = useState([
    {
      label: <ClockCircleOutline />,
      value: 'isDesc',
      description: '出发 早→晚'
    },
    {
      label: <span className="iconfont icon-gaotie"></span>,
      value: 'isSpeed',
      description: '只看高铁动车'
    },
    {
      label: <BillOutline />,
      value: 'isSeat',
      description: '只看有票'
    }
  ])

  // 监听选中项改变的事件，通过形参，拿到所有选中项的 value 值
  const onSelectorChange = (value) => {
    // 动态修改第一个筛选条件的文本
    if (value.includes('isDesc')) {
      // 证明被选中了，需要把文本改成“耗时 短→长”
      options[0].description = '耗时 短→长'
    } else {
      // 证明取消了勾选，需要把文本改成“出发 早→晚”
      options[0].description = '出发 早→晚'
    }

    // -------------------------

    // 1. 先定义一个数组，包含所有筛选条件的 key 值
    // 2. 循环步骤1中定义的数组，判断每个循环项是否被包含在 value 数组中
    // 2.1. 如果被循环项包含在 value 数组中，则被循环项的值应该为 true
    // 2.2. 否则，被循环项的值应该为 false
    // 3. 把循环的结果，拼接到一起，形成一个包含3个筛选条件和对应值的 Object 对象
    const arr = ['isDesc', 'isSpeed', 'isSeat']
    const temp = {}
    arr.forEach((item) => {
      if (value.includes(item)) {
        temp[item] = true
      } else {
        temp[item] = false
      }
    })
    // 4. 调用 setSP 函数，把这个对象，设置为 url 中的查询参数
    // setSP({...旧数据, ...新数据})
    setSP({ ...Object.fromEntries(sp), ...temp })
  }

  // useMemo 得到的是一个值
  // useCallback 得到的是一个函数
  const dv = useMemo(() => {
    const arr = ['isSpeed', 'isSeat', 'isDesc']
    const temp = []

    arr.forEach((item) => {
      if (sp.get(item) === 'true') {
        temp.push(item)
      }
    })

    // 特殊处理第一个筛选条件，修改显示的文案
    if (sp.get('isDesc') === 'true') {
      options[0].description = '耗时 短→长'
    }

    return temp
  }, [sp])

  return (
    <div className={styles.footerBox}>
      <Selector
        columns={3}
        options={options}
        defaultValue={dv}
        multiple
        onChange={onSelectorChange}
      />
    </div>
  )
}

export default TabFooter
